<template>
    <!-- 产品添加 -->
     <p style="font-weight: 800;margin-left: 300px;">产品修改</p>
     <br/>
     <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
    <el-form-item label="标识：" prop="pCharacteristic">
      <el-input v-model="ruleForm.pCharacteristic" />
    </el-form-item>
    <el-form-item label="产品编号：" prop="pNumber">
      <el-input v-model="ruleForm.pNumber" />
    </el-form-item>
    <el-form-item label="产品名称：" prop="pName">
      <el-input v-model="ruleForm.pName" />
    </el-form-item>
    <el-form-item label="所属类别：" prop="productTypeId">
      <el-select v-model="ruleForm.productTypeId" placeholder="请选择所属类别" clearable >
        <el-option v-for="item in Types" :key="item.productTypeId" :label="item.ptClass" :value="item.productTypeId" />
      </el-select>
    </el-form-item>
    <el-form-item label="规格型号：" prop="pSpec">
      <el-input v-model="ruleForm.pSpec" />
    </el-form-item>
    <el-form-item label="单位：" prop="pUnit">
      <el-input v-model="ruleForm.pUnit" />
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        修改
      </el-button>
      <el-button @click="ShowP()">取消</el-button>
    </el-form-item>

    
    </el-form>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']
import http from '../../http.js'
// console.log(route.query)

const ruleForm = reactive({
    productId:route.query.productId,//产品ID
    pCharacteristic: route.query.pCharacteristic,//标识
    pNumber: route.query.pNumber,//产品编号
    pName:route.query.pName,//产品名称
    pSpec: route.query.pSpec,//规格型号
    pUnit: route.query.pUnit,//单位
    productTypeId: Number(route.query.productTypeId),//产品分类ID
    addName: 'lf',
    addTime: '2024-12-16',
    updName: 'lf',
    updTime:'2024-12-16',
    office_Id: '11',
    user_Id:1
})
// const rules = reactive<FormRules>({
//     pCharacteristic: [
//         { required: true, message: '标识不能为空', trigger: 'blur' },
//     ],
//     pNumber: [
//         { required: true, message: '产品编号不能为空', trigger: 'blur' },
//     ],
//     pName: [
//         { required: true, message: '产品名称不能为空', trigger: 'blur' },
//     ],
//     pSpec: [
//         { required: true, message: '规格型号不能为空', trigger: 'blur' },
//     ],
//     pUnit: [
//         { required: true, message: '单位不能为空', trigger: 'blur' },
//     ],
//     productTypeId: [
//         { required: true, message: '所属类别不能为空', trigger: 'blur' },
//     ],
// })

onMounted(() => {
    GetProductType();//显示产品分类下拉框
})

//修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
      if (valid) {
        console.log(ruleForm)
        axios.put(http.zblnb+'/erpcp/api/Product/ProductUpd',ruleForm)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('修改成功');
                router.push('/ShowProduct')
            }  
            else  if (res.data.data == -1){
                ElMessage.error('修改名称已存在，不可修改')
                return
            }  
            else {
                ElMessage.error('修改失败')
                return
            } 
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//获取产品分类
///////////////需要调用zbl写的产品分类网关///////////////
const Types=ref([])
const GetProductType = () => {
    axios.get(http.zblnb+'/erpcp/api/ProductType/ProductTypeSet')
    .then(res => {
        Types.value = res.data.data
    })
    .catch(err => {
        console.log(err)    
    })
}

//取消跳转显示页面
const ShowP = () => {
    router.push('/ShowProduct')
}
    
</script>
    
<style>
    
</style>